#include("/_function/layout/default.vue")
#@layout(i18n['title'])
#define jsCustom()
<template type="text/x-template" id="tpl-center-content">
    <div id="content">
        <form action="#" @submit.prevent="submit" class="form-horizontal">
            <div class="page-header">
                <div class="container-fluid">
                    <div class="pull-right">
                        <button type="submit" :disabled="submitting" class="btn btn-primary"><i class="fa fa-save"></i></button>
                    </div>
                    <h1>网站设置</h1>
                    <ul class="breadcrumb">
                        <li><a href="http://127.0.0.1:8091/common/dashboard">首页</a></li>
                        <li><a href="http://127.0.0.1:8091/system/setting">网站设置</a></li>
                    </ul>
                </div>
            </div>
            <div class="container-fluid">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-pencil"></i>修改</h3>
                    </div>
                    <div class="panel-body">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab-general" data-toggle="tab">常规</a></li>
                            <li><a href="#tab-local" data-toggle="tab">本地参数</a></li>
                            <li><a href="#tab-mail" data-toggle="tab">邮件</a></li>
                            <li><a href="#tab-server" data-toggle="tab">服务器</a></li>
                            <li><a href="#tab-third-party" data-toggle="tab">第三方服务</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="tab-general">
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label">网址名称</label>
                                    <div class="col-sm-10">
                                        <div v-for="language in languages">
                                            <div class="input-group"
                                                 :class="{'has-error' : errors.siteTitle[language.languageCode]}">
                                                <span class="input-group-addon">{{ language.languageCode }}</span>
                                                <input v-model="setting.siteTitle[language.languageCode]"
                                                       type="text"
                                                       placeholder="网址名称"
                                                       class="form-control">
                                            </div>
                                            <div class="text-danger" v-if="errors.siteTitle[language.languageCode]">{{ errors.siteTitle[language.languageCode] }}</div>
                                        </div>
                                    </div>

                                </div>
                                <div class="form-group required">
                                    <label class="col-sm-2 control-label">Meta 标题</label>
                                    <div class="col-sm-10">
                                        <div v-for="language in languages">
                                            <div class="input-group"
                                                 :class="{'has-error' : errors.metaTitle[language.languageCode]}">
                                                <span class="input-group-addon">{{ language.languageCode }}</span>
                                                <input v-model="setting.metaTitle[language.languageCode]"
                                                       type="text"
                                                       placeholder="Meta 标题"
                                                       class="form-control">
                                            </div>
                                            <div class="text-danger" v-if="errors.metaTitle[language.languageCode]">{{ errors.metaTitle[language.languageCode] }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Meta 描述</label>
                                    <div class="col-sm-10">
                                        <div v-for="language in languages">
                                            <div class="input-group"
                                                 :class="{'has-error' : errors.metaDescription[language.languageCode]}">
                                                <span class="input-group-addon">{{ language.languageCode }}</span>
                                                <textarea v-model="setting.metaDescription[language.languageCode]"
                                                          rows="5"
                                                          placeholder="Meta 描述"
                                                          class="form-control"></textarea>
                                            </div>
                                            <div class="text-danger" v-if="errors.metaDescription[language.languageCode]">{{ errors.metaDescription[language.languageCode] }}</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">Meta 关键词</label>
                                    <div class="col-sm-10">
                                        <div v-for="language in languages">
                                            <div class="input-group"
                                                 :class="{'has-error' : errors.metaKeyword[language.languageCode]}">
                                                <span class="input-group-addon">{{ language.languageCode }}</span>
                                                <textarea v-model="setting.metaKeyword[language.languageCode]"
                                                          rows="5"
                                                          placeholder="Meta 关键词"
                                                          class="form-control"></textarea>
                                            </div>
                                            <div class="text-danger" v-if="errors.metaKeyword[language.languageCode]">{{ errors.metaKeyword[language.languageCode] }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab-local">
                                <div class="form-group"
                                     :class="{'has-error' : errors.currency}">
                                    <label class="col-sm-2 control-label">本币</label>
                                    <div class="col-sm-10">
                                        <select v-model="setting.currency" class="form-control">
                                            <option v-for="currency in currencies" :value="currency.code" selected="">{{ currency.name }}</option>
                                        </select>
                                        <div class="text-danger" v-if="errors.currency">{{ errors.currency }}</div>
                                    </div>
                                </div>
                                <div class="form-group"
                                     :class="{'has-error' : errors.language.catalog}">
                                    <label class="col-sm-2 control-label">前端语言</label>
                                    <div class="col-sm-10">
                                        <select v-model="setting.language.catalog"
                                                class="form-control">
                                            <option :value="language.languageCode" v-for="language in languages">{{ language.name }}</option>
                                        </select>
                                        <div class="text-danger" v-if="errors.language.catalog">{{ errors.language.catalog }}</div>
                                    </div>
                                </div>
                                <div class="form-group"
                                     :class="{'has-error' : errors.language.admin}">
                                    <label class="col-sm-2 control-label">后台语言</label>
                                    <div class="col-sm-10">
                                        <select v-model="setting.language.admin"
                                                class="form-control">
                                            <option :value="language.languageCode" v-for="language in languages">{{ language.name }}</option>
                                        </select>
                                        <div class="text-danger" v-if="errors.language.admin">{{ errors.language.admin }}</div>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane" id="tab-mail">
                                <fieldset>
                                    <legend>常规</legend>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.engine}">
                                        <label class="col-sm-2 control-label">邮件引擎</label>
                                        <div class="col-sm-10">
                                            <select v-model="setting.mail.engine" class="form-control">
                                                <option value="mail">Mail</option>
                                                <option value="smtp" selected="">Smtp</option>
                                            </select>
                                            <div class="text-danger" v-if="errors.mail.engine">{{ errors.mail.engine }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.ssl}">
                                        <label class="col-sm-2 control-label">SSL加密</label>
                                        <div class="col-sm-10">
                                            <select v-model="setting.mail.ssl" class="form-control">
                                                <option value="true" selected="">是</option>
                                                <option value="false">否</option>
                                            </select>
                                            <div class="text-danger" v-if="errors.mail.ssl">{{ errors.mail.ssl }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.hostname}">
                                        <label class="col-sm-2 control-label">SMTP 主机</label>
                                        <div class="col-sm-10">
                                            <input v-model="setting.mail.hostname"
                                                   type="text"
                                                   placeholder="SMTP 主机"
                                                   class="form-control">
                                            <div class="text-danger" v-if="errors.mail.hostname">{{ errors.mail.hostname }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.username}">
                                        <label class="col-sm-2 control-label">SMTP 用户名</label>
                                        <div class="col-sm-10">
                                            <input v-model="setting.mail.username"
                                                   type="text"
                                                   placeholder="SMTP 用户名"
                                                   class="form-control">
                                            <div class="text-danger" v-if="errors.mail.username">{{ errors.mail.username }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.personal}">
                                        <label class="col-sm-2 control-label">SMTP 昵称</label>
                                        <div class="col-sm-10">
                                            <input v-model="setting.mail.personal"
                                                   type="text"
                                                   placeholder="SMTP 昵称"
                                                   class="form-control">
                                            <div class="text-danger" v-if="errors.mail.personal">{{ errors.mail.personal }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.password}">
                                        <label class="col-sm-2 control-label">SMTP 密码</label>
                                        <div class="col-sm-10">
                                            <input v-model="setting.mail.password"
                                                   type="password"
                                                   placeholder="SMTP 密码"
                                                   class="form-control">
                                            <div class="text-danger" v-if="errors.mail.password">{{ errors.mail.password }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.port}">
                                        <label class="col-sm-2 control-label">SMTP 端口</label>
                                        <div class="col-sm-10">
                                            <input v-model="setting.mail.port"
                                                   type="text"
                                                   placeholder="SMTP 端口"
                                                   class="form-control">
                                            <div class="text-danger" v-if="errors.mail.port">{{ errors.mail.port }}</div>
                                        </div>
                                    </div>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.mail.timeout}">
                                        <label class="col-sm-2 control-label">SMTP 超时（秒）</label>
                                        <div class="col-sm-10">
                                            <input v-model="setting.mail.timeout"
                                                   type="text"
                                                   placeholder="SMTP 超时（秒）"
                                                   class="form-control">
                                            <div class="text-danger" v-if="errors.mail.timeout">{{ errors.mail.timeout }}</div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="tab-pane" id="tab-server">
                                <fieldset>
                                    <legend>常规</legend>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.maintenance}">
                                        <label class="col-sm-2 control-label">系统维护模式</label>
                                        <div class="col-sm-10">
                                            <select v-model="setting.maintenance" class="form-control">
                                                <option value="true">是</option>
                                                <option value="false" selected="">否</option>
                                            </select>
                                            <div class="text-danger" v-if="errors.maintenance">{{ errors.maintenance }}</div>
                                        </div>
                                    </div>
                                </fieldset>
                                <fieldset>
                                    <legend>安全</legend>
                                    <div class="form-group"
                                         :class="{'has-error' : errors.encryption}">
                                        <label class="col-sm-2 control-label">加密密钥</label>
                                        <div class="col-sm-10">
                                            <textarea v-model="setting.encryption" rows="5" placeholder="加密密钥" class="form-control"></textarea>
                                            <div class="text-danger" v-if="errors.encryption">{{ errors.encryption }}</div>
                                        </div>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="tab-pane" id="tab-third-party">
                                <div class="alert alert-info">
                                    根据需要添加或删除配置项
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</template>

<script>
document.addEventListener("DOMContentLoaded", function () {
    Vue.component('center-content', {
        template: document.getElementById('tpl-center-content'),
        props: ['languages'],
        data: function () {
            return {
                submitting: false,
                currencies: [{
                    code: "CNY",
                    name: "人民币"
                }],
                setting: {
                    siteTitle: {},
                    metaTitle: {},
                    metaDescription: {},
                    metaKeyword: {},
                    currency: '',
                    language: {
                        catalog: '',
                        admin: ''
                    },
                    mail: {
                        engine: '',
                        hostname: '',
                        ssl: '',
                        username: '',
                        password: '',
                        personal: '',
                        port: '',
                        timeout: '',
                    },
                    maintenance: '',
                    encryption: ''
                },
                defaultErrors: {
                    siteTitle: {},
                    metaTitle: {},
                    metaDescription: {},
                    metaKeyword: {},
                    currency: '',
                    language: {
                        catalog: '',
                        admin: ''
                    },
                    mail: {
                        engine: '',
                        hostname: '',
                        ssl: '',
                        username: '',
                        password: '',
                        personal: '',
                        port: '',
                        timeout: '',
                    },
                    maintenance: '',
                    encryption: ''
                },
                errors: {}
            }
        },
        created: function () {
            gateway.post('api/system/localisation/currency/list').then((response) => {
                this.currencies = response.data.currencies
            })
            this.clear();
            this.updateSetting()
        },
        watch: {
            languages: {
                handler: function (nV, oV) {
                    this.updateSetting()
                },
                deep: true
            }
        },
        methods: {
            updateSetting: function () {
                for (let language of this.languages) {
                    this.setting.siteTitle[language.languageCode] = ''
                    this.setting.metaTitle[language.languageCode] = ''
                    this.setting.metaDescription[language.languageCode] = ''
                    this.setting.metaKeyword[language.languageCode] = ''
                }
                gateway.post('api/system/setting/get', {code: 'config'}).then((response) => {     // 获取配置
                    var data = response.data;
                    this.setting = data.setting || this.setting
                })
            },
            submit: function () {
                this.submitting = true;
                this.clear();
                let i = layer.load(2)
                gateway.post('api/system/setting/save', this.setting).then((response) => {
                    var data = response.data;
                    this.errors = _.assign({}, this.defaultErrors, data.errors || {});
                    layer.alert(data.message, {icon: Object.keys(data.errors || {}).length === 0 ? 1 : 0})
                }).finally(() => {
                    this.submitting = false;
                    layer.close(i)
                })
            },
            clear: function () {
                this.errors = _.assignIn({}, this.defaultErrors);
            }
        }
    })
})
</script>
#end